<template>
    <div>
        <el-dialog title="编辑指令服务" :visible.sync="dialogVisible" width="500px" :before-close="closeEditDialog"
            :close-on-click-modal="false" :append-to-body="true">
            <el-form :model="editData" :rules="rules" ref="refAddInfo" label-width="100px">
                <el-form-item size="small" label="服务名称" prop="serviceName">
                    <el-input clearable placeholder="请输入" v-model="editData.serviceName" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item size="small" label="参数名称" prop="paramName">
                    <el-input clearable placeholder="请输入" v-model="editData.paramName" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item size="small" label="标识符" prop="identifier">
                    <el-input clearable placeholder="请输入" v-model="editData.identifier" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item size="small" label="输入类型" prop="inputType">
                    <el-radio v-model="editData.inputType" label="1">文本填充</el-radio>
                    <el-radio v-model="editData.inputType" label="2" style="margin-left: 20px;">下拉选择</el-radio>
                </el-form-item>
                <el-form-item size="small" label="取值范围" v-show="editData.inputType == '1'">
                    <el-input-number size="mini" v-model="num1" :min="0" :max="998" ></el-input-number><span
                        class="test">至</span>
                    <el-input-number size="mini" v-model="num2" :min="1" :max="999" ></el-input-number>
                </el-form-item>

                <el-form-item size="small" label="" v-show="editData.inputType == '2'"
                    v-for="(domain, index) in editData.dataDefinition2" :key="index">
                    <div style="display: flex;justify-content: space-between;">
                        <el-input type="input" maxlength="15" v-model.trim="domain.key" style="width: 40%"
                            placeholder="消音">
                        </el-input>
                        <el-input type="input" style="width: 40%" maxlength="5" v-model.trim="domain.value"
                            :placeholder="index + 1"></el-input>
                        <div style="display: flex;align-items: center;justify-content:center;">
                            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                                <i class="el-icon-remove-outline zuobiao2" @click.prevent="removeFloor(domain)"></i>
                            </el-tooltip>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item size="small" v-show="editData.inputType == '2'&& editData.dataDefinition2.length <10">
                    <el-tooltip class="item" effect="dark" content="新增" placement="bottom">
                        <i class="el-icon-circle-plus-outline zuobiao2" @click="addFloor"></i>
                    </el-tooltip>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
                <el-button size="small" @click="addSubmit"  v-preventReClick="1500" class="confirm-button">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {  reqCommandServiceUpdate } from "@/api/api";
import { mapState } from "vuex";

export default {
    props:['editData'],
    name: "add",
    mixins: [],
    components: {},
    data() {
        return {
            dialogVisible: false,
            num1: 1,
            num2: 100,
            // 表单验证规则
            rules: {
                serviceType: [{ required: true, message: "请输入服务标识", trigger: "blur" }],
                serviceName: [{ required: true, message: "请输入服务名称", trigger: "blur" }],
                paramName: [{ required: true, message: "请输入参数名称", trigger: "blur" }],
                identifier: [{ required: true, message: "请输入标识符", trigger: "blur" }],
            },
        };
    },
    computed: {
        ...mapState(["user"]),
    },
    watch:{
        dialogVisible(e){
            if(e && this.editData.inputType==2){
                this.editData.dataDefinition2=JSON.parse(this.editData.dataDefinition2)
            }else if(e && this.editData.inputType==1){
                this.num1=this.editData.dataDefinition1.substring(0,this.editData.dataDefinition1.indexOf(','))
                this.num2=this.editData.dataDefinition1.substring(this.editData.dataDefinition1.indexOf(',')+1)
            }
        }
    },
    methods: {
        removeFloor(item) {
            // console.log(this.editData.floorsId.length);
            if (this.editData.dataDefinition2.length == 1) return;
            var index = this.editData.dataDefinition2.indexOf(item);
            if (index !== -1) {
                this.editData.dataDefinition2.splice(index, 1);
            }
        },
        addFloor() {
            this.editData.dataDefinition2.push({
                key: "",
                value: "",
            });
        },
        addSubmit() {
            this.$refs.refAddInfo.validate(async (valid) => {
                if (valid) {
                    if(this.editData.inputType=='1'){
                        this.editData.dataDefinition1 = this.num1 + ',' + this.num2;
                    }
                    const res = await reqCommandServiceUpdate(this.editData);
                    if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
                    this.$modal.notifySuccess("编辑指令成功");
                    this.closeEditDialog();
                    this.$parent.getCommandServicePage();//更新
                }
            });
        },
        // 点击关闭弹框
        closeEditDialog() {
            this.num1= 1
            this.num2= 100
            this.$refs.refAddInfo.resetFields();
            this.dialogVisible = false;
        },
    },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");

// 下拉框加载开始
.div_box {
    height: 276px;
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    z-index: 2016;
    // background: red;
    // opacity: 0.5;
}

::v-deep .el-loading-mask {
    border-radius: 4px;
}

// 下拉框加载结束
// 单选按钮
::v-deep .el-radio {
    color: @primaryThemeTxtColor2;
}

::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #7367F0;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
    border-color: #7367F0;
    background: #7367F0;
}

// 取值范围
::v-deep .el-input-number__decrease {
    color: #fff;
    background: #7367F0;
    border-right: 0;
}

::v-deep .el-input-number__increase {
    border-left: 0;
    color: #fff;
    background: #7367F0;
}

.test {
    color: @primaryThemeTxtColor2;
    margin: 0 10px;
}

.zuobiao2 {
    color: @primaryTxtcolor;
    font-size: 20px;
    cursor: pointer;
}
</style>